<template>
  <div class="view-header">
    <div class="logo">
      <img src="/static/images/题头.png">
      <span>空间服务管理平台</span>
    </div>
    <div class="menu">
      <el-menu :default-active="menuData.activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false">
        <template v-for="(item,index) in menuData.menus">
          <el-menu-item :index="item.key" v-if="!item.children">{{ item.title }}</el-menu-item>
          <el-sub-menu v-else :index="item.key" :teleported="false">
            <template #title>{{ item.title }}</template>
            <el-menu-item v-for="(i,idx) in item.children" :key="idx" :index="i.key">{{ i.title }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'

let menuData = reactive({
  activeIndex: "2-1",
  menus: [
    {
      title: "首页",
      key: "1"
    },
    {
      title: "数据",
      key: "2",
      children: [
        {
          title: "数据源",
          key: "2-1"
        },
        {
          title: "数据列表",
          key: "2-2"
        }
      ]
    },
    {
      title: "矢量服务管理",
      key: "3"
    },
    {
      title: "影像服务管理",
      key: "4"
    },
    {
      title: "地形服务管理",
      key: "5"
    },
    {
      title: "瓦片服务管理",
      key: "6"
    },
    {
      title: "任务",
      key: "7"
    },
    {
      title: "配置管理",
      key: "8"
    },
    {
      title: "素材",
      key: "9"
    }
  ]
})
</script>

<style lang="less" scoped>
.view-header {
  width: 100%;
  height: 70px;
  background: rgb(37, 43, 58);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;

  .logo {
    display: flex;
    align-items: center;

    img {
      width: 37px;
    }

    span {
      margin-left: 10px;
      font-size: 22px;
      font-family: DFPLiJinHeiW8-GB;
      color: #ffffff;
    }
  }

  .menu {
    :deep(.el-menu) {
      background-color: rgba(0, 0, 0, 0);
      border-bottom: none;

      .el-menu-item {
        color: #fff;

        &:hover {
          background: linear-gradient(360deg, rgba(0, 152, 249, 0.1) 0%, rgba(0, 133, 217, 0) 100%);
        }
      }

      .is-active {
        background-color: rgba(0, 0, 0, 0);
      }

      .el-sub-menu__title {
        color: #fff;

        &:hover {
          background: linear-gradient(360deg, rgba(0, 152, 249, 0.1) 0%, rgba(0, 133, 217, 0) 100%);
        }
      }

      .el-popper {
        background-color: #252b3a;

        .el-menu-item {
          background-color: rgba(0, 0, 0, 0);
        }

        .is-active {
          color: var(--el-color-primary)
        }
      }
    }
  }
}
</style>